<template>
  <div style="padding-bottom: 50px">
    <van-search
      disabled
      placeholder="请输入搜索关键词"
      @click="$router.push('/search')"
    />
    <div class="box">
      <!-- <div class="box2"> -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in title"
          :key="item"
          :title="item"
          @click="onChange(item, $event)"
        />
      </van-sidebar>
      <!-- </div>
      <div class="box3"> -->
      <van-row>
        <van-col span="8" v-for="item in goodslist" :key="item.goods_id">
          <van-image
            width="50"
            height="50"
            :src="item.goods_small_logo"
            @click="$router.push('/goods/' + item.goods_id)"
          />

          {{ item.cat_three_id }}</van-col
        >
      </van-row>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
export default {
  data() {
    return {
      activeKey: 0,
      title: [],
      goodslist: [],
    };
  },
  created() {
    this.$request.get("/find/title").then(({ data }) => {
      data.data.forEach((item) => {
        this.title.push(item.cat_one_id);
      });
    });
    this.onChange("个护健康", 0);
  },
  methods: {
    onChange(item, index) {
      this.$request
        .get("/find/goods", {
          params: { limit: 30, page: 1, title: item },
        })
        .then(({ data }) => {
          this.goodslist = data.data;
          //滚动条回到顶部
          const rowscroll = document.querySelector(".van-row");
          rowscroll.scrollTop = 0;
        });
    },
  },
};
</script>
<style scoped>
.box {
  display: flex;
  height: calc(100vh - 104px);
  padding-top: 54px;
  overflow: hidden;
}
.van-row {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: scroll;
}
.van-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100px;
}
.van-sidebar {
  margin: 0;
}
.van-search {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}
</style>